<template>
  <div>
    <div>
      <el-form :model="searchs" ref="searchRef" inline>
        <el-form-item label="" prop="searchContent">
          <el-input
              v-model="searchs.searchContent"
              class="w-50 m-2"
              placeholder="请输入搜索内容"
              :prefix-icon="Search"
          />
        </el-form-item>
        <el-form-item label="" prop="roleId">
          <el-select v-model="searchs.roleId" class="m-2" placeholder="选择角色" @visible-change="sendRoles" clearable>
            <el-option
                v-for="item in roles.list" :key="item.id"
                :label="item.roleName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="otherCondition">
          <el-select v-model="searchs.otherCondition" class="m-2" placeholder="其他条件" clearable>
            <el-option label="昵称" value="nickname"/>
            <el-option label="编号" value="id"/>
            <el-option label="用户名" value="userName"/>
            <el-option label="邮箱" value="email"/>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" :icon="Search" @click="sendUserSearch">搜索</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="searchRef.resetFields()">重置</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="addDialogVisible=true">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="data_class">
      <el-table :data="users.list" style="width: 100%;" show-overflow-tooltip>
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="userName" label="用户名" width="140"/>
        <el-table-column prop="nickname" label="昵称" width="140"/>
        <el-table-column prop="email" label="邮箱" width="180"/>
        <el-table-column prop="phone" label="手机号" width="150"/>
        <el-table-column label="状态" width="80">
          <template #default="item">
            <el-switch v-model="item.row.state" :active-value="0"
                       :inactive-value="1"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="item">
            <el-button :disabled="item.row.userName=='admin'" @click.stop="deleteUser"> 删除</el-button>
            <el-button :disabled="item.row.userName=='admin'" @click.stop="updateUser(item.row)"> 修改</el-button>
            <el-text :disabled="item.row.userName=='admin'" @click.stop="sendMessage(item.row.id)"> 发送消息</el-text>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_class">
        <!--      分页按钮-->
        <div>
          <div>分页标签</div>
          <el-pagination
              background
              v-model:current-page="pageInfo.pageNum"
              v-model:page-size="pageInfo.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- --------------------------------------- 弹窗------------------------------------------------------>
  <div>
    <el-dialog
        v-model="seePerson"
        title="修改"
        width="45%"
        :before-close="findPersonClose"
        multiple
    >
      <div>
        <div>
          <!--虚拟骨架屏-->
          <el-skeleton style="width: 240px" :loading="loading" animated>
            <template #template>
              <el-skeleton-item variant="image" style="width: 240px; height: 240px"/>
              <div style="padding: 14px">
                <el-skeleton-item variant="p" style="width: 50%"/>
                <div style="display: flex;align-items: center;justify-items: space-between;">
                  <el-skeleton-item variant="text" style="margin-right: 16px"/>
                  <el-skeleton-item variant="text" style="width: 30%"/>
                </div>
              </div>
            </template>
            <!--            真实UI-->
            <template #default>
              <div class="">
                <el-form :inline="true" :model="selectPerson" class="demo-form-inline" :label-position="right">
                  <el-form-item label="编号">
                    <el-input v-model="selectPerson.id" placeholder="Approved by" disabled/>
                  </el-form-item>
                  <el-form-item label="角色">
                    <el-select
                        v-model="selectPerson.roleIds"
                        placeholder="请选择角色"
                        multiple
                        @visible-change="sendRoles"
                        clearable>
                      <el-option :label="item.roleName" :value="item.id" v-for="item in roles.list" :key="item.id"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="selectPerson.email" placeholder="请输入邮箱" clearable/>
                  </el-form-item>
                  <el-form-item label="用户名">
                    <el-input v-model="selectPerson.userName" placeholder="请输入用户名" clearable/>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input v-model="selectPerson.phone" placeholder="请输入手机号" clearable/>
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="selectPerson.nickname" placeholder="请输入昵称" clearable/>
                  </el-form-item>
                  <el-form-item label="重置密码">
                    <el-input v-model="selectPerson.password" placeholder="请输入密码" clearable/>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="selectPerson.gender" class="ml-4">
                      <el-radio :label="0" size="large">男</el-radio>
                      <el-radio :label="1" size="large">女</el-radio>
                      <el-radio :label="2" size="large">未知</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </el-skeleton>
        </div>
        <div>
        </div>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="findPersonClose">取消</el-button>
        <el-button type="primary" @click="submitUserUpdate">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!--    新增弹窗-->
    <el-dialog
        v-model="addDialogVisible"
        title="新增"
        width="50%"
        @close="addRef.resetFields()"
    >
      <div >
        <el-form :model="addUserInfo" label-width="80" size="large" inline :rules="rules" ref="addRef">
          <el-form-item label="头像" prop="avatar">
            <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                name="files"
                :action="$upFile"
                :data="fileInfoVo"
                :auto-upload="true"
                :on-success="handleAvatarSuccess"
            >
              <img v-if="addUserInfo.avatarUrl" :src="addUserInfo.avatar" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="addUserInfo.userName"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addUserInfo.password"/>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="addUserInfo.nickname"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addUserInfo.email"/>
          </el-form-item>
          <el-form-item label="角色">
            <el-select
                v-model="addUserInfo.roleIds"
                placeholder="请选择角色"
                @visible-change="sendRoles"
                clearable
                multiple
            >
              <el-option :label="item.roleName" :value="item.id" v-for="item in roles.list" :key="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="addUserInfo.gender" class="ml-4">
              <el-radio :label=0 size="large">男</el-radio>
              <el-radio :label=1 size="large">女</el-radio>
              <el-radio :label=2 size="large">未知</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUser(addRef)">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {reactive, onMounted, ref, watch} from "vue";
import {Search, Plus} from '@element-plus/icons-vue';
import {getAllUsers, getUserInfo, addAdminUser, UserSearch, updateAdminUser} from '@/api/home/user';
import {getNullFiltration} from '@/util/Utils'
import {getAllRoles} from "@/api/home/permission/role";
import {createChatListItem} from "@/api/home/communication/chat";
import {useMenusStore} from "@/store/permission";

const  store=useMenusStore()
/*封装数据*/
let searchs = reactive({
  searchContent: '',
  roleId: '',
  otherCondition: ''
})
let roles = reactive({
  list: []
})
let users = reactive({
  list: []
});
let fileInfoVo = reactive({
  bucketName: 'user',
  folderName: 'avatar'
})
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 5,
  total: ''
})
let addUserInfo = reactive({
  avatarUrl:'',
  avatar: '',
  gender: 0,
  password: '',
  userName: '',
  nickname: '',
  email: '',
  roleIds: []
})
let chatItem=reactive({
  anotherId:''
})

let seePerson = ref(false)
let addDialogVisible = ref(false)
let selectPerson = ref({})
let loading = ref(true)
let addRef=ref()
let searchRef=ref()
/*初始化数据*/
onMounted(() => {
  sendUser(pageInfo.pageNum, pageInfo.pageSize)
})
async function sendUser(pageNum, pageSize) {
  /*获分页获取全部用户列表*/
  let res = await getAllUsers(pageNum, pageSize)
  pageInfo.total = res.data.total - 0
  users.list = res.data.records
}

function sendMessage(userId){
  chatItem.anotherId=userId
  createChatListItem(chatItem).then(()=>{
    store.setActive('person-message')
  })
}

function sendRoles() {
  getAllRoles().then(res => {
    roles.list = res.data
  })
}

/*发送搜索内容*/
function sendUserSearch() {
  /*校验*/
  UserSearch(searchs).then(res => {
    users.list = res.data
  })
}

/*查看选择的用户信息*/
async function updateUser(row) {
  seePerson.value = true
  /*获取用户详细信息*/
  let res = await getUserInfo(row.id)
  selectPerson.value = res.data
  loading.value = false
}

/*关闭用户信息弹窗*/
function findPersonClose() {
  seePerson.value = false
  selectPerson.value = {}
}

/*提交修改用户信息*/
function submitUserUpdate() {
  try {
    updateAdminUser(getNullFiltration(selectPerson.value))
  } catch (e) {
    console.log(e)
  }
  seePerson.value = false
}

function handleAvatarSuccess(res) {
  addUserInfo.avatar = res.data
}

/*添加用户*/
function submitUser(r) {

  r.validate(v=>{
    if (v){
      addAdminUser(addUserInfo).then(res => {
        addDialogVisible.value = false
      })
    }
    else return false
  })
}

function deleteUser() {
  /*弹出提示*/
  console.log('触发')
}

/*事件监听区域*/
watch([()=>pageInfo.pageNum,()=>pageInfo.pageSize],() => {
  /*分页按钮发送请求*/
  sendUser(pageInfo.pageNum,pageInfo.pageSize)
})
let rules=reactive({
  userName: [
    { required: true, message: '该字段不能为空', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '该字段不能为空', trigger: 'blur' },
  ],
  nickname: [
    { required: true, message: '该字段不能为空', trigger: 'blur' },
  ],
})


</script>

<style scoped>

.data_class, .pagination_class {
  margin-top: 30px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>
